<template>
  <div class="layout">
    <el-form ref="formRef" :model="formData" label-width="96px" class="searchForm" :inline="true">
      <el-form-item label="时间筛选" class="selectTime">
        <div class="selectTime_btn" @click="selectTime($event)">
          <span :class="['selectTime_btn_item', currentId == -1 ? 'active' : '']" id="-1">昨天</span>
          <span :class="['selectTime_btn_item', currentId == -7 ? 'active' : '']" id="-7">最近7天</span>
          <span :class="['selectTime_btn_item', currentId == -30 ? 'active' : '']" id="-30">最近30天</span>
        </div>
      </el-form-item>
      <el-form-item label="选择成员和部门" class="selectMembers" label-width="110">
        <el-select v-model="formData.member" placeholder="全部" multiple class="Select" @click="openDepart">
          <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">
            {{ item.name }}
          </el-option>
        </el-select>
        <div class="picker_time">
          <el-date-picker v-model="formData.date1" @change="checkTimeFun" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" style="width: 100%"></el-date-picker>
        </div>
        <div class="text-center"></div>
        <div class="picker_time">
          <el-date-picker v-model="formData.date2" @change="checkTimeFun" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" style="width: 100%"></el-date-picker>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
        <el-button @click="resetForm(formRef)">清空</el-button>
      </el-form-item>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" />
    <!-- 标签弹框 -->
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import ZWDepart from '@/components/ZWDepart.vue'
import ZWSelectTag from '@/components/ZWSelectTag.vue'
import { getSetionId, getDay } from '@/utils/utils'
//import { getDay } from '@/utils/timeCycle'
import type { ElForm } from 'element-plus'
import { useStore } from '@/store'
const store = useStore()
const emit = defineEmits(['searchData'])
// 创建人options
const creators = ref([])
const users = ref([])
const currentId = ref(-7) // 选择最近天数的 id
const value = ref('')
// 收集的表单数据
const formData = reactive({
  member: users,
  date1: '',
  date2: ''
})
// 选择最近时间
const selectTime = (event: any) => {
  currentId.value = event.target.id
  let type = event.target.id
  switch (type) {
    case '-1':
      formData.date1 = getDay(-1)
      formData.date2 = getDay(-1, true)
      break
    case '-7':
      formData.date1 = getDay(-7)
      formData.date2 = getDay(0, true)
      break
    case '-30':
      formData.date1 = getDay(-30)
      formData.date2 = getDay(0, true)
      break
  }
}
// 查询按钮
const submitForm = (data: any) => {
  console.log('查询', formData)
  emit('searchData', formData)
}
// 清空
const resetForm = (formEl: any) => {
  currentId.value = -7
  formData.member = []
  formData.date1 = getDay(-7)
  formData.date2 = getDay(0, true)
  emit('searchData', formData)
}
//打开新建选择人
const openDepart = () => {
  store.dispatch('content/depart', {
    creaters: creators,
    departVisble: true
  })
}
const departInfo = computed(() => {
  return store.getters['content/depart']
})
// 部门人员信息
watch(departInfo, (depart) => {
  creators.value = depart.creaters
  users.value = getSetionId('id', depart.creaters)
})
watch(
  () => currentId.value,
  (oVal, nVal) => {
    formData.date1 = getDay(currentId.value)
    formData.date2 = getDay(0, true)
  },
  {
    deep: true,
    immediate: true
  }
)
// 检查时间是否正确
const checkTimeFun = () => {
  if (formData.date1 && formData.date2) {
    if (new Date(formData.date1.replace(/-/g, '/')).getTime() > new Date(formData.date2.replace(/-/g, '/')).getTime()) {
      let time = formData.date1
      formData.date1 = formData.date2
      formData.date2 = time
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  padding: 0 20px 0 0;
  position: relative;
  height: 106px;
  background: #fff;
  display: flex;
  align-items: center;
  .searchForm {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    .search_item {
      max-width: 180px;
      margin-bottom: 0;
    }
    :deep .el-select {
      width: 180px;
    }
    :deep .el-form-item {
      margin: 5px;
    }
    :deep .el-form-item__content {
      display: flex;
      align-items: center;
    }
    :deep .el-input--prefix .el-input__inner {
      padding-left: 10px;
      padding-right: 0px;
    }
    .selectTime {
      .selectTime_btn {
        display: flex;
        align-items: center;
        &_item {
          padding: 0 18px;
          margin-right: 16px;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #eaeaea;
          cursor: pointer;
        }
        .active {
          border: 1px solid #ff6b00;
          color: #ff6b00;
        }
      }
    }
    .search_btn {
      position: absolute;
      top: 5px;
      right: 0;
    }
    .selectMembers {
      .Select {
        margin-right: 16px;
      }
      .picker_time {
        width: 150px;
        :deep .el-input__icon.el-icon {
          display: none;
        }
      }
      .text-center {
        width: 14px;
        border-top: 1px solid #969696;
        margin: 0 13px;
      }
    }
  }
  .text {
    font-size: 14px;
    color: #848484;
    line-height: 14px;
    position: absolute;
    right: 8px;
    top: -22px;
  }
}
</style>
